<template>
  <!-- Video & Audio Icon - Purple Clapperboard -->
  <svg v-if="type === 'video'" class="dropdown-icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- Clapperboard shape -->
    <path d="M4 5C4 4.44772 4.44772 4 5 4H11L19 12V19C19 19.5523 18.5523 20 18 20H5C4.44772 20 4 19.5523 4 19V5Z" fill="#764ba2"/>
    <path d="M11 4L19 12H11V4Z" fill="#9D70D6" opacity="0.8"/>
    <!-- Play button -->
    <path d="M9 8L9 16L14 12L9 8Z" fill="white" opacity="0.95"/>
  </svg>

  <!-- Image Icon - Picture Frame with Landscape -->
  <svg v-else-if="type === 'image'" class="dropdown-icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- Frame -->
    <rect x="4" y="6" width="16" height="12" rx="1" stroke="#667eea" stroke-width="1.5" fill="white"/>
    <!-- Sky background -->
    <rect x="5" y="7" width="14" height="6" fill="#87CEEB" opacity="0.4"/>
    <!-- Mountains -->
    <path d="M5 13L7 10L9 11L11 8L13 10L15 9L19 13V18H5V13Z" fill="#70B04A" opacity="0.7"/>
    <!-- Sun -->
    <circle cx="17" cy="9" r="2" fill="#FFD700"/>
    <circle cx="17" cy="9" r="1.5" fill="#FFA500" opacity="0.6"/>
  </svg>

  <!-- PDF & File Icon - Document with lines -->
  <svg v-else-if="type === 'pdf'" class="dropdown-icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- Document background -->
    <path d="M5 3C5 2.44772 5.44772 2 6 2H14L19 7V21C19 21.5523 18.5523 22 18 22H6C5.44772 22 5 21.5523 5 21V3Z" fill="#C4B5FD" opacity="0.3"/>
    <path d="M5 3C5 2.44772 5.44772 2 6 2H14L19 7V21C19 21.5523 18.5523 22 18 22H6C5.44772 22 5 21.5523 5 21V3Z" stroke="#A78BFA" stroke-width="1.5"/>
    <!-- Folded corner -->
    <path d="M14 2V7H19L14 2Z" fill="#A78BFA" opacity="0.5"/>
    <!-- Text lines -->
    <line x1="8" y1="11" x2="16" y2="11" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round"/>
    <line x1="8" y1="14" x2="16" y2="14" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round"/>
    <line x1="8" y1="17" x2="14" y2="17" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round"/>
  </svg>

  <!-- GIF Icon - Blue Film Strip -->
  <svg v-else-if="type === 'gif'" class="dropdown-icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- Film strip background -->
    <rect x="4" y="6" width="16" height="12" rx="1" fill="white" stroke="#3b82f6" stroke-width="1.5"/>
    <!-- Film strip perforations on left -->
    <rect x="5" y="8" width="1.5" height="1.5" rx="0.3" fill="#3b82f6" opacity="0.6"/>
    <rect x="5" y="11" width="1.5" height="1.5" rx="0.3" fill="#3b82f6" opacity="0.6"/>
    <rect x="5" y="14" width="1.5" height="1.5" rx="0.3" fill="#3b82f6" opacity="0.6"/>
    <!-- Film strip perforations on right -->
    <rect x="17.5" y="8" width="1.5" height="1.5" rx="0.3" fill="#3b82f6" opacity="0.6"/>
    <rect x="17.5" y="11" width="1.5" height="1.5" rx="0.3" fill="#3b82f6" opacity="0.6"/>
    <rect x="17.5" y="14" width="1.5" height="1.5" rx="0.3" fill="#3b82f6" opacity="0.6"/>
    <!-- GIF text -->
    <text x="12" y="16" font-family="Arial, sans-serif" font-size="7" font-weight="bold" fill="#3b82f6" text-anchor="middle">GIF</text>
  </svg>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    required: true,
    validator: (value) => ['video', 'image', 'pdf', 'gif'].includes(value)
  }
})
</script>

<style scoped>
.dropdown-icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
</style>

